<template>

	<div class="act-prize-list">

		<div> <!-- @change="activityTypeChange" style="width: 400px;" v-model="form.activity_type" -->
			<el-radio-group v-model="type">
				<el-radio-button label="none">无优惠</el-radio-button>
				<el-radio-button label="会员折扣">会员折扣</el-radio-button>
			</el-radio-group>
		</div>

		<div v-if="type=='会员折扣'">
			<sc-form-table ref="table" v-model="options" :addTemplate="commAddTemplate" drag-sort placeholder="暂无数据">
				<el-table-column class-name="custom-cell" label="会员等级" width="90">
					<template #default="scope">
						<el-select v-model="scope.row.viplevel" placeholder="请选择">
							<el-option :label="'没会员'" :value="-1"></el-option>
							<el-option :label="0" :value="0"></el-option>
							<el-option :label="1" :value="1"></el-option>
							<el-option :label="2" :value="2"></el-option>
							<el-option :label="3" :value="3"></el-option>
							<el-option :label="4" :value="4"></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column class-name="custom-cell" label="显示折扣" width="70px">
					<template #default="scope">
						<el-input type="number" placeholder="折扣" size="small" v-model.number="scope.row.discount">
						</el-input>
					</template>
				</el-table-column>
				<el-table-column class-name="custom-cell" label="绑定卡券">
					<template #default="scope">
						<el-input type="text" placeholder="卡券" size="small" v-model.number="scope.row.coupon_id">
						</el-input>
					</template>
				</el-table-column>
			</sc-form-table>
		</div>

		<div class="table-opt-handle">
			<productSelect multiple :params="{
				order: 'product_price_desc',
				selectFilter:{
					product_on_sale:1
				}
			}" ref="productSelect" v-model="selectList"></productSelect>
			<el-button size="small" link type="primary" @click="select">
				<i class="fc-icon icon-add"></i> 选择商品
			</el-button>
		</div>
		<sc-form-table ref="table" hideAdd v-model="list" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
			<el-table-column class-name="custom-cell" label="&nbsp;商品信息">
				<template #default="scope">
					<el-descriptions :column="1" border size="small">
						<el-descriptions-item label="商品图片">
							<el-image style="max-width: 80px; max-height: 80px;" preview-teleported hide-on-click-modal
								:src="scope.row.image" :preview-src-list="[scope.row.image]" show-progress fit="contain"
								:z-index="19900501" />
						</el-descriptions-item>
						<el-descriptions-item label="标题">
							<el-input placeholder="标题" size="small" v-model="scope.row.title">
							</el-input>
						</el-descriptions-item>
						<el-descriptions-item label="金额">
							{{scope.row.price}}<el-input v-if="false" placeholder="折扣" size="small"
								v-model.number="scope.row.price">
							</el-input>
						</el-descriptions-item>
						<el-descriptions-item label="积分">
							{{scope.row.points}}<el-input v-if="false" placeholder="折扣" size="small"
								v-model.number="scope.row.points">
							</el-input>
						</el-descriptions-item>
						<el-descriptions-item label="库存">
							<el-input type="number" placeholder="库存" size="small" v-model.number="scope.row.stock">
							</el-input>
						</el-descriptions-item>
					</el-descriptions>
				</template>
			</el-table-column>
		</sc-form-table>
	</div>
</template>

<script>
	import productSelect from '@/views/shop/adSpace/select/product.vue'

	import {
		defineComponent
	} from 'vue';
	import {
		copy
	} from '@form-create/utils/lib/extend';

	export default defineComponent({
		name: 'productMarketing',
		emits: ['update:modelValue', 'change'],
		components: {
			productSelect,
		},
		computed: {
			options: {
				get() {
					return this.modelValue.options || [];
				},
				set(val) {
					this.modelValue.options = val;
					this.$emit('update:modelValue', this.modelValue);
				}
			},
			selectList: {
				get() {
					return this.list;
				},
				set(val) {
					val = val.map(item => {
						return {
							id: item.id,
							image: item.image || item.product_image,
							title: item.title || item.product_title,
							price: item.price || item.product_price,
							points: item.points || item.product_points,
						};
					});
					this.list = val
				}
			},
			list: {
				get() {
					let result = this.modelValue.list || [];
					return result;
				},
				set(val) {
					this.modelValue.list = val
					this.$emit('update:modelValue', this.modelValue);
				}
			},
			type: {
				get() {
					return this.modelValue.type || 'none';
				},
				set(val) {
					this.emitUpdate({
						type: val
					})
				}
			},
		},
		props: {
			modelValue: {
				type: Object,
				default: () => ({
					type: 'none',
					options: {

					},
					list: []
				})
			},
			max: {
				type: Number,
				default: 8
			},
			size: String,
		},
		inject: ['designer'],
		data() {
			return {
				commAddTemplate: {
					viplevel: null,
					discount: 1
				},
				addTemplate: {}
			};
		},
		methods: {
			// 合并更新触发事件
			emitUpdate(partial) {
				this.$emit('update:modelValue', {
					...this.modelValue,
					...partial
				})
			},
			addEmpty() {
				this.$refs.table.rowAdd({
					title: '谢谢参与',
					id: 0,
					image: 'https://cdn.jisuapp.cn/zhichi_frontend/static/webapp/images/phone-free.png',
					rate: 0,
					stock: 999999,
					dailyLimit: 0
				})
			},
			select() {
				this.$refs.productSelect.toggleMenu((e) => {
					return;
					this.$refs.table.rowAdd({
						title: e.product_title,
						id: e.id,
						image: e.product_image,
						price: e.product_price,
						points: e.product_points
					});
				});
			},
		}
	});
</script>

<style scoped>
	.act-prize-list {
		width: 100%;
	}
</style>
